import React from 'react';

import Worklog from './worklog';
import Project from './project';
import Employee from './employee';
import UserInfo from './userInfo';
import { TabBar, NavBar } from 'antd-mobile';
import BrowserUtils from '../service/history';
import LocalStorage from '../service/LocalStorage';

let tabOptions = {
  title: "日志",
  rightLabel: 'log列表',
  onRightTouchTap: '',
  selectedTab: 0
};
export default class Home extends React.Component {
  
    componentWillMount() {
      this.setState({
        title: "日志",
        rightLabel: 'log列表',
        onRightTouchTap:  () => this.logList(),
        selectedTab: 0,
        hidden: false,
      });
      const user = LocalStorage.getItem('user');
      if (user) {
        this.isAdmin = user.role === 1;
      }
    }

    componentDidMount() {
      
    }


    // 改变nav导航时执行
    onTouchTapSel(tag) {
      if(tag===0){
        tabOptions = {
          title: "日志",
          rightLabel: 'log列表',
          onRightTouchTap: () => this.logList(),
          selectedTab: tag
        };
        
      }else if(tag===1){
        tabOptions = {
          title: "项目工时",
          rightLabel: '添加',
          onRightTouchTap: () => this.editProjectInfo(),
          selectedTab: tag
        };
      }else if(tag===2){
        tabOptions = {
          title: "员工",
          rightLabel: '添加',
          onRightTouchTap: () => this.addEmployee(),
          selectedTab: tag
        };
      }else{
        tabOptions = {
          title: "我的",
          rightLabel: '',
          onRightTouchTap: '',
          selectedTab: tag
        };
      }
      this.setState({tabOptions})
    }

    addEmployee() {
      BrowserUtils.push({pathname: '/employeeInfoEdit', state: {type: 'add'}});
      tabOptions.selectedTab = 2;
    }

    logList() {
      BrowserUtils.push({pathname: '/logList'});
      tabOptions.selectedTab = 0;
    }

    editProjectInfo() {
      BrowserUtils.push({pathname: '/addProject'});
      tabOptions.selectedTab = 1;
    }

    render() {
      const tab = this.isAdmin 
          ? <TabBar
              unselectedTintColor="#949494"
              tintColor="#33A3F4"
              barTintColor="white"
              hidden={this.state.hidden}
            >
              <TabBar.Item
                title="日志"
                key="日志"
                icon={<div style={{
                  width: '0.44rem',
                  height: '0.44rem',
                  background: 'url("./log1.svg") center center /  0.42rem 0.42rem no-repeat' }}
                />
                }
                selectedIcon={<div style={{
                  width: '0.44rem',
                  height: '0.44rem',
                  background: 'url("./log2.svg") center center /  0.42rem 0.42rem no-repeat' }}
                />
                }
                selected={tabOptions.selectedTab === 0}
                onPress={() => {
                  this.onTouchTapSel(0);
                }}
                data-seed="logId"
              >
                <Worklog {...this.props} tag={tabOptions.selectedTab} />
              </TabBar.Item>
              <TabBar.Item
                icon={<div style={{
                  width: '0.44rem',
                  height: '0.44rem',
                  background: 'url("./project1.svg") center center /  0.42rem 0.42rem no-repeat' }}
                />
                }
                selectedIcon={<div style={{
                  width: '0.44rem',
                  height: '0.44rem',
                  background: 'url("./project2.svg") center center /  0.42rem 0.42rem no-repeat' }}
                />
                }
                title="项目"
                key="项目"
                selected={tabOptions.selectedTab === 1}
                onPress={() => {
                  this.onTouchTapSel(1);
                }}
                data-seed="logId1"
              >
                <Project {...this.props} tag={tabOptions.selectedTab} />
              </TabBar.Item>
              <TabBar.Item
                icon={<div style={{
                  width: '0.44rem',
                  height: '0.44rem',
                  background: 'url("./employee1.svg") center center /  0.42rem 0.42rem no-repeat' }}
                />
                }
                selectedIcon={<div style={{
                  width: '0.44rem',
                  height: '0.44rem',
                  background: 'url("./employee2.svg") center center /  0.42rem 0.42rem no-repeat' }}
                />
                }
                title="员工"
                key="员工"
                style={{overflow: 'hidden'}}
                selected={tabOptions.selectedTab === 2}
                onPress={() => {
                  this.onTouchTapSel(2);
                }}
              >
              <Employee {...this.props} tag={tabOptions.selectedTab} />
              </TabBar.Item>
              <TabBar.Item
                icon={<div style={{
                  width: '0.44rem',
                  height: '0.44rem',
                  background: 'url("./me1.svg") center center /  0.42rem 0.42rem no-repeat' }}
                />
                }
                selectedIcon={<div style={{
                  width: '0.44rem',
                  height: '0.44rem',
                  background: 'url("./me2.svg") center center /  0.42rem 0.42rem no-repeat' }}
                />
                }
                title="我的"
                key="我的"
                selected={tabOptions.selectedTab === 3}
                onPress={() => {
                  this.onTouchTapSel(3);
                }}
              >
                <UserInfo  {...this.props} tag={tabOptions.selectedTab} />
              </TabBar.Item>
            </TabBar>
        : <TabBar
            unselectedTintColor="#949494"
            tintColor="#33A3F4"
            barTintColor="white"
            hidden={this.state.hidden}
          >
            <TabBar.Item
              title="日志"
              key="日志"
              icon={<div style={{
                width: '0.44rem',
                height: '0.44rem',
                background: 'url("./log1.svg") center center /  0.42rem 0.42rem no-repeat' }}
              />
              }
              selectedIcon={<div style={{
                width: '0.44rem',
                height: '0.44rem',
                background: 'url("./log2.svg") center center /  0.42rem 0.42rem no-repeat' }}
              />
              }
              selected={tabOptions.selectedTab === 0}
              onPress={() => {
                this.onTouchTapSel(0);
              }}
              data-seed="logId"
            >
              <Worklog {...this.props} tag={tabOptions.selectedTab} />
            </TabBar.Item>
            <TabBar.Item
              icon={<div style={{
                width: '0.44rem',
                height: '0.44rem',
                background: 'url("./me1.svg") center center /  0.42rem 0.42rem no-repeat' }}
              />
              }
              selectedIcon={<div style={{
                width: '0.44rem',
                height: '0.44rem',
                background: 'url("./me2.svg") center center /  0.42rem 0.42rem no-repeat' }}
              />
              }
              title="我的"
              key="我的"
              selected={tabOptions.selectedTab === 3}
              onPress={() => {
                this.onTouchTapSel(3);
              }}
            >
              <UserInfo  {...this.props} tag={tabOptions.selectedTab} />
            </TabBar.Item>
          </TabBar>
          

        return (
          <div style={{height: '100vh', display: this.props.display}}>
          <NavBar
            mode="dark"
            className="am-tab-bar-bar"
            style={{top: 0}}
            iconName={false}
            rightContent={[
              <div key="0" onClick={() => tabOptions.onRightTouchTap ? tabOptions.onRightTouchTap() : this.logList()}>{tabOptions.rightLabel}</div>
            ]}
          >
          {tabOptions.title}
          </NavBar>
          {tab}
        </div>
        );
    }
}


